<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?= $page_title ?? ''; ?></title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_2791172_cyuvqidx3fa.css">
    <link rel="stylesheet" href="/css/mini.css">
    <?= $custom_css ?? ''; ?>
</head>
<body>
    <div class="app d-flex h-100">
        <main id="main" role="main">
            <div class="auth-form mt-5 mx-auto">
                <div class="auth-form mt-5 mx-auto">
                    <h2 class="p-4 fw-bold fs-24 text-center">欢迎您</h2>
                    <!-- <div class="d-flex justify-content-center align-items-center suspend fs-20 fw-bold">临时停止注册</div> -->
                    <form id="auth-form" class="needs-validation" method="POST" autocomplete="off">
                        <input type="hidden" name="csrf_token" value="<?= csrf_token() ?>">
                        <div class="form-floating mb-4">
                            <input type="text" class="form-control" name="username" id="username" placeholder="用户名" autocomplete="off" required autofocus>
                            <label for="username" id="nameHelp">用户名</label>
                        </div>
                        <div class="form-floating mb-4">
                            <input type="password" class="form-control" name="password" id="password" placeholder="密码" required>
                            <label for="password" id="passwordHelp">密码</label>
                        </div>
                        <div class="form-floating mb-4">
                            <input type="text" class="form-control" name="captcha" id="captcha" placeholder="验证码" required>
                            <img src="/user/captcha"  id="resetCaptcha" class="auth-captcha hand" data-bs-toggle="tooltip" data-bs-title="点击刷新验证码">
                            <label for="captcha" id="captchaHelp">验证码</label>
                        </div>
                        <button type="submit" id="submitButton" class="btn btn-secondary w-100 auth-btn rounded px-0">注册</button>
                    </form>
                    <p class="text-center mt-4">
                        <a href="/user/login" class="btn btn-light">已有账号？由此登录</a>
                    </p>
                    <hr class="hr-solid-content" data-content="社交账号登录">
                </div>
            </div>
        </main>
    </div>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/bootstrap.bundle.min.js"></script>
    <script src="/js/mini.js"></script>
    <script src="/js/toast.js"></script>
    <?= isset($custom_js) ? assets_js($custom_js) : ''; ?>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const form = document.getElementById('auth-form');
            const [username, password, captcha] = ['username', 'password', 'captcha'].map(id => document.getElementById(id));
            const [nameHelp, passwordHelp, captchaHelp] = ['nameHelp', 'passwordHelp', 'captchaHelp'].map(id => document.getElementById(id));

            [username, password, captcha].forEach((input, index) => {
                input.addEventListener('input', () => validateInput(input, [nameHelp, passwordHelp, captchaHelp][index]));
            });

            function validateInput(input, helpElement) {
                const value = input.value.trim();
                const minLength = input.id === 'username' ? 3 : (input.id === 'password' ? 6 : 4);
                const isValid = value.length >= minLength;
                const placeholder = input.placeholder;

                input.classList.toggle('is-invalid', !isValid);
                helpElement.textContent = isValid ? placeholder : `请至少输入 ${minLength} 位数`;
                helpElement.classList.toggle('text-danger', !isValid);

                return isValid;
            }

            form.addEventListener('submit', function(event) {
                event.preventDefault(); // 阻止表单的默认提交行为
                if (!validateInput(username, nameHelp) ||
                    !validateInput(password, passwordHelp) ||
                    !validateInput(captcha, captchaHelp)) return; // 如果任一项验证失败，返回并显示错误信息

                const formData = new FormData(form); // 创建表单数据对象
                fetch('/user/register/submit', { method: 'POST', body: formData })
                    .then(response => response.json()) // 将响应解析为 JSON 格式的数据
                    .then(data => { // 根据服务器的响应结果执行相应的操作
                        if (data.status === 'success') {
                            toast.success(data.message);
                            setTimeout(() => {
                                if (document.referrer === "") window.location.href = "/";
                                else window.history.back();
                            }, 1500);
                        } else {
                            toast.error(data.message);
                            document.querySelector(".auth-captcha").setAttribute("src", "/user/captcha/" + Math.random());
                        }
                    });
            });
        });
    </script>
</body>
</html>
